import React,{useState} from 'react'
import { Card,Button } from 'antd';
import ReactECharts from 'echarts-for-react'
import './Charts.css'

/* 
  线形图路由
*/
export default function Line() {
  const [data, setData] = useState({
    sales:[85,79,66,21,43,64,86,19,51],
    stores:[188,196,142,161,149,165,229,198,165]
  });

  const update=()=>{
    setData(data=>{
      let diff=new Array(data.sales.length).fill(0).map(i=>parseInt(Math.random()*5))
      let sales=data.sales
      let stores=data.stores.map((store,index)=>{
        if(store-diff[index]>0){
          sales[index]+=diff[index]
          return store-diff[index]
        }else{
          if(store===0)return 0
          sales[index]+=store
          return 0
        }
        
      })
      return {sales,stores}
    })
  }

  const title=<Button type='primary' onClick={()=>update()}>更新</Button>

  const getOption=()=>{
    return {
      title:{
        text:'笔记本销量库存线形图'
      },
      xAxis: {
        type: 'category',
        data: ['Lenovo', 'Apple', 'DELL', 'Asus', 'Acer', 'Samsung', '小米' , '华为' , '神舟']
      },
      yAxis: {
          type: 'value'
      },
      legend: {
        data: ['销量', '库存']
    },
      series: [{
          name:'销量',
          data: data.sales,
          type: 'line',
      },{
        name:'库存',
        data: data.stores,
        type: 'line',
    }]
    }
  }

  return (
    <div>
      <Card title={title}>
        <ReactECharts option={getOption()} style={{height:'60vh'}}></ReactECharts>
      </Card>
    </div>
  )
}
